import React, { useState, useEffect, useRef } from 'react';
import { Input, Select, Button, Cascader, Drawer } from 'antd';
import GoodTable from '../../../components/shop/goodtable';
import GoodFrom from '../../../components/shop/goodFrom';
import GoodFrom2 from '../../../components/shop/goodFrom2';
import { getGoods, getGoodTypes, addGoods, delGood } from '../../../apis/goods';
import querystring from 'querystring';
const { Option } = Select;

export default function index() {
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const [goodsData, setGoodsData] = useState([]);
  const [typeData, setTypeData] = useState([]);
  const [updataData, setUpdataData] = useState([]);
  const [id, setId] = useState([]);
  const [status, setStatus] = useState('上架');
  const title = useRef();
  useEffect(() => {
    getGoodsData();
    goodsType();
  }, []);
  const showDrawer = () => {
    setVisible(true);
  };
  const showDrawer2 = (value) => {
    setVisible2(true);
    console.log(value);
    setUpdataData({ ...value });
  };
  const onClose = () => {
    setVisible(false);
  };
  const onClose2 = () => {
    setVisible2(false);
  };
  function onChange(value) {
    console.log(value);
  }
  const statusChange = (value) => {
    setStatus(value);
  };
  const findAll = () => {
    getGoodsData();
  };
  //获取商品数据
  const getGoodsData = async () => {
    const result = await getGoods(querystring.stringify({ pageSize: 1336 }));
    setGoodsData(result.rows);
  };
  //获取商品分类
  const goodsType = async () => {
    const result = await getGoodTypes();
    setTypeData(result.rows.children);
  };
  //搜索商品数据
  const findGoods = async () => {
    const params = {
      name: title.current.state.value,
      status,
      status: status,
      pageSize: 1336,
    };
    const result = await getGoods(querystring.stringify(params));
    console.log(result);
    setGoodsData(result.rows);
  };
  //添加商品数据
  const add = async (value) => {
    const result = await addGoods(querystring.stringify(value));
    getGoodsData();
    setVisible(false);
  };
  //获取删除商品数据id
  const delID = (value) => {
    setId(value);
  };
  //删除商品数据
  const del = async () => {
    // console.log()
    const result = await delGood(id.join(','));
    console.log(result);
    getGoodsData();
  };
  //更新商品数据
  const updata = async () => {};
  return (
    <div>
      <Input
        addonBefore="商品名称"
        placeholder="请输入商品名称"
        style={{ width: '300px' }}
        ref={title}
      />
      <Input
        addonBefore="商品状态"
        style={{ width: '80px', marginLeft: '20px' }}
      />
      <Select
        defaultValue="上架"
        style={{ width: 120 }}
        onChange={statusChange}
      >
        <Option value="上架">上架</Option>
        <Option value="下架">下架</Option>
      </Select>
      <Button style={{ float: 'right', marginLeft: '20px' }} onClick={findAll}>
        重置
      </Button>
      <Button style={{ float: 'right' }} onClick={findGoods}>
        查询
      </Button>
      <Input
        addonBefore="商品分类"
        style={{ width: '80px', marginLeft: '20px' }}
      />
      <Cascader
        fieldNames={{ label: 'title', value: 'title', children: 'children' }}
        options={typeData}
        onChange={onChange}
        placeholder="请选择商品分类"
      />
      ,
      <p>
        <Button
          style={{ float: 'left', marginTop: '10px' }}
          onClick={showDrawer}
        >
          新增
        </Button>
        <Button
          onClick={del}
          style={{ float: 'left', marginLeft: '10px', marginTop: '10px' }}
        >
          删除
        </Button>
      </p>
      <GoodTable
        goodsData={goodsData}
        delID={delID}
        showDrawer2={showDrawer2}
      ></GoodTable>
      <Drawer
        title="商品添加"
        placement="right"
        onClose={onClose}
        visible={visible}
      >
        <GoodFrom add={add} typeData={typeData}></GoodFrom>
      </Drawer>
      <Drawer
        title="商品修改"
        placement="right"
        onClose={onClose2}
        visible={visible2}
      >
        <GoodFrom2
          updataData={updataData}
          add={add}
          typeData={typeData}
        ></GoodFrom2>
      </Drawer>
    </div>
  );
}
